<template>
  <div class="container">
    <div class="row full-width q-my-md">
      <div class="title">My Audios</div>
    </div>
    <q-table
      selection="multiple"
      :columns="columns"
      :rows="audios"
      v-model:pagination="pagination"
      :loading="isLoading"
      @request="onRequest"
    >
      <template v-slot:body-cell-video="{ value, row, rowIndex }">
        <q-td
          auto-width
          class="cover-container"
          @mouseover="onItemOver($event, row, rowIndex)"
          @mouseout="onItemOut"
        >
          <q-img
            class="cover-image"
            style="width: 166px; height: 100%"
            :src="value"
            :ratio="16 / 9"
            @click="onItemClick($event, row, rowIndex)"
          >
            <div
              class="absolute-full text-subtitle2 flex flex-center no-pointer-events"
              v-if="onOver && onOverIndex === rowIndex"
            >
              <q-btn
                flat
                icon="mdi-open-in-new"
                padding="none"
                style="font-size: 18px"
              />
            </div>
          </q-img>
        </q-td>
      </template>
      <template v-slot:body-cell-audio="{ row, rowIndex }">
        <q-td
          auto-width
          @mouseover="onItemOver($event, row, rowIndex)"
          @mouseout="onItemOut"
        >
          <div
            class="row no-wrap full-width justify-around"
            v-if="onOver && onOverIndex === rowIndex"
          >
            <q-btn
              flat
              icon="mdi-alert-circle-outline"
              padding="none"
              style="font-size: 18px"
              @click="showDetail(row)"
            />
            <q-btn
              flat
              icon="mdi-pencil"
              padding="none"
              style="font-size: 18px"
            />
            <q-btn
              flat
              icon="mdi-playlist-plus"
              padding="none"
              style="font-size: 18px"
            />
            <q-btn
              flat
              icon="mdi-share-variant"
              padding="none"
              style="font-size: 18px"
            />
            <q-btn
              flat
              :icon="row.isPinned ? 'mdi-pin-off' : 'mdi-pin'"
              padding="none"
              style="font-size: 18px"
            />
            <q-btn
              flat
              icon="mdi-dots-vertical"
              padding="none"
              style="font-size: 18px"
            />
          </div>
          <div class="video-info column" v-else>
            <div class="video-title one-line-text">{{ row.title }}</div>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-status="{ value }">
        <q-td auto-width>
          <video-status-icon :status="value" />
        </q-td>
      </template>
      <template v-slot:body-cell-languages="{ value }">
        <q-td auto-width>
          <language-chip :code="value" />
        </q-td>
      </template>
      <template v-slot:body-cell-compliments="{ value }">
        <q-td auto-width>
          <div class="row" style="width: 224px">
            <v-icon-num
              icon="mdi-podium"
              :label="value[0].count"
              style="width: 40px; margin: 0"
            />
            <v-icon-num
              icon="mdi-podium"
              :label="value[1].count"
              style="width: 40px; margin: 0"
            />
            <v-icon-num
              icon="mdi-podium"
              :label="value[2].count"
              style="width: 40px; margin: 0"
            />
            <v-icon-num
              icon="mdi-podium"
              :label="value[3].count"
              style="width: 40px; margin: 0"
            />
            <v-icon-num
              icon="mdi-podium"
              :label="value[4].count"
              style="width: 40px; margin: 0"
            />
          </div>
        </q-td>
      </template>
    </q-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import { IPage } from 'boot/axios';
import VideoStatusIcon from 'components/video/VideoStatusIcon.vue';
import VIconNum from 'components/utils/VIconNum.vue';
import Audio from 'src/models/Audio';
import LanguageChip from 'components/LanguageChip.vue';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';

export default defineComponent({
  components: {
    VideoStatusIcon,
    VIconNum,
    LanguageChip,
  },
  setup() {
    const userStore = useUserStore();
    const globalStore = useGlobalStore();
    const columns = ref<any[]>([
      {
        name: 'video',
        label: 'Video',
        field: 'coverImage',
        align: 'left',
      },
      {
        name: 'audio',
        label: 'Audio',
        align: 'left',
        field: '',
      },
      { name: 'status', label: 'Status', field: 'status', align: 'left' },
      {
        name: 'languages',
        label: 'Languages',
        align: 'center',
        field: 'langCode',
      },
      { name: 'plays', label: 'Plays', field: 'playCount', align: 'center' },
      {
        name: 'compliments',
        label: 'Compliments',
        field: 'compliments',
        align: 'left',
      },
      {
        name: 'date',
        label: 'Date',
        field: 'createTimeLabel',
        align: 'center',
      },
    ]);
    const $q = useQuasar();
    const router = useRouter();
    const audios = computed(() => userStore.myAudios);
    const page = computed(() => userStore.myAudiosPage);
    const pagination = ref<any>({
      page: 0,
      rowsPerPage: 10,
      rowsNumber: 0,
    });
    const isLoading = ref(false);
    const onOver = ref(false);
    const onOverIndex = ref();
    onMounted(async () => {
      await onRequest();
    });
    const onItemOver = (event: any, row: Audio, index: number) => {
      onOver.value = true;
      onOverIndex.value = index;
    };
    const onItemOut = () => {
      onOver.value = false;
      onOverIndex.value = undefined;
    };
    const onRequest = async (prop: any = null) => {
      isLoading.value = true;
      let params = {
        page: pagination.value.page,
        size: pagination.value.rowsPerPage,
      };
      if (prop) {
        params = {
          page: prop.pagination.page,
          size: prop.pagination.rowsPerPage,
        };
      }
      await userStore.getMyAudios(params);
      pagination.value = {
        page: page.value!.page,
        rowsPerPage: page.value!.size,
        rowsNumber: page.value!.total,
      };
      isLoading.value = false;
    };
    function showDetail(item: Audio) {
      globalStore.setMyContentsRightDrawer(item);
    }
    return {
      audios,
      pagination,
      isLoading,
      columns,
      onOver,
      onOverIndex,
      onItemOver,
      onItemOut,
      onRequest,
      onItemClick(event: any, row: Audio, index: number) {
        router.push({ name: 'Audio', params: { id: row.id } });
      },
      showDetail,
    };
  },
});
</script>
<style lang="scss" scoped>
$description-width: 244px;
.title {
  font-size: 22px;
}
.cover-container {
  position: relative;
  .cover-image {
    div {
      z-index: 2;
    }
  }
  .duration-label {
    position: absolute;
    right: 20px;
    bottom: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2px 4px;
    border-radius: 4px;
    z-index: 1;
  }
}
.video-info {
  width: $description-width;
  max-width: $description-width;
  .video-title {
    width: $description-width;
    font-size: 14px;
    font-weight: bold;
  }
  .video-description {
    width: $description-width;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    font-size: 12px;
    color: #808080;
    word-break: break-all;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
</style>
